<script setup lang="ts">
import { Operation, User, SwitchButton, Plus } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";

// 添加好友
const addFriend = () => {
  try {
    let electronAPI: any = (window as any).electronAPI;
    electronAPI.openAddUserWindow();
  } catch (err) {
    console.log("窗口打开失败", err);
  }
};
// 我的信息
const myInfo = () => {
  ElMessage.success("我的信息");
};
// 退出登陆
const exitLogin = () => {
  ElMessageBox.confirm("是否退出登录", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      try {
        let electronAPI: any = (window as any).electronAPI;
        // 清空用户数据
        await electronAPI.store.delete("user");
        electronAPI.exitLogin();
      } catch (err) {
        console.log("退出登录失败", err);
      }
    })
    .catch(() => {
      ElMessage.info("已取消");
    });
};
</script>

<template>
  <el-dropdown trigger="click" placement="top-start">
    <el-icon size="20" color="#909399" style="cursor: pointer">
      <Operation />
    </el-icon>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item :icon="Plus" @click="addFriend"
          >添加好友</el-dropdown-item
        >
        <el-dropdown-item :icon="User" @click="myInfo"
          >我的信息</el-dropdown-item
        >
        <el-dropdown-item :icon="SwitchButton" @click="exitLogin"
          >退出登陆</el-dropdown-item
        >
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>